<template>
    <div class="recommend-contain" v-if="recommendshoplist.length>0">
      <ul class="recommend">
        <shoplist 
        v-for="(item,index) in recommendshoplist" 
        :item='item'
        :key="index" />
      </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import shoplist from './../../components/shoplist/shoplist'
import BScroll from 'better-scroll'
import {Indicator} from 'mint-ui'
import 'mint-ui/lib/style.css'

export default {
    name:"Tuijian",
    data(){
        return{
            page:1,
            count:10
        }
    },
    mounted(){
        Indicator.open('加载中');
        this.$store.dispatch('reqRecommendShopList',{page:this.page,count:this.count,callback: ()=>{
            Indicator.close();
        }});
    },

    computed:{
        ...mapState(['recommendshoplist'])
    },

    components:{
        shoplist
    },

    watch:{
        recommendshoplist(){
            this.$nextTick(()=>{
                //当前页码加1
                this.page += 1
                this._initBScroll();
            });
        }
    },

    methods:{
        _initBScroll(){
            let listScroll = new BScroll('.recommend-contain',{
                scrollY:true,
                probeType:3
            });

        //监听列表滚动
        listScroll.on('touchEnd',(position)=>{
            //监听上拉
             if(listScroll.maxScrollY > position.y + 20){
               console.log('上拉');
             }       

            //监听下拉
             if(position.y>50){
                 Indicator.open('加载中...');
                this.$store.dispatch('reqRecommendShopList', {page: this.page, count: this.count, callback: ()=>{
                    Indicator.close();
                }});
             }

        });

        //监听列表滚动结束
        listScroll.on('scrollEnd',()=>{
            listScroll.refresh();
        });


        }
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .recommend-contain{
        background #f5f5f5
        width 100%
        height 100%
    }

    .recommend{  
        display flex
        flex-direction row
        flex-wrap wrap
        background #f5f5f5
        margin-bottom 50px
    }


</style>